@extends('admin::layouts.master')
@section('content')
    <div class="card" id="app">
        <div class="card-header">品牌管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/buy/brand" class="nav-link">品牌列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">添加品牌</a></li>
        </ul>
        <form action="/buy/brand" method="post">
            <div class="card-body card-body-contrast">
                @csrf
                <div class="form-group row">
                    <label for="name" class="col-12 col-sm-3 col-form-label text-md-right">品牌名称</label>
                    <div class="col-12 col-md-9">
                        <input id="name" name="name" type="text"
                               value="{{ $brand['name']??old('name') }}"
                               class="form-control form-control-sm form-control{{ $errors->has('name') ? ' is-invalid' : '' }}">
                    </div>
                </div>

                {{--上传单图，品牌的图片--}}
                <div class="form-group row">
                    <label for="thumb" class="col-12 col-sm-3 col-form-label text-md-right">缩略图</label>
                    <div class="col-12 col-lg-9">
                        {{--<hd-image name="thumb" id="thumb" image-url="{!! $article['thumb'] !!}"></hd-image>--}}

                        <div class="input-group mb-1">
                            <input class="form-control  form-control-sm" name="thumb" readonly="" value="">
                            <div class="input-group-append">
                                <button onclick="upImagePc(this)" class="btn btn-secondary" type="button">单图上传</button>
                            </div>
                        </div>
                        <div style="display: inline-block;position: relative;">
                            <img src="/img/4041.jpg" class="img-responsive img-thumbnail" width="150">
                            <em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
                                onclick="removeImg(this)">×</em>
                        </div>

                        <script>
                            require(['hdjs', 'bootstrap']);

                            //上传图片
                            function upImagePc() {
                                require(['hdjs'], function (hdjs) {
                                    var options = {
                                        multiple: false,//是否允许多图上传
                                        //data是向后台服务器提交的POST数据
                                        data: {name: '后盾人', year: 2099},
                                    };
                                    hdjs.image(function (images) {
                                        //上传成功的图片，数组类型
                                        $("[name='thumb']").val(images[0]);
                                        $(".img-thumbnail").attr('src', images[0]);
                                    }, options)
                                });
                            }

                            //移除图片
                            function removeImg(obj) {
                                $(obj).prev('img').attr('src', '../dist/static/image/nopic.jpg');
                                $(obj).parent().prev().find('input').val('');
                            }
                        </script>


                    </div>
                </div>

                {{--所属分类--}}
                <div class="form-group row pt-1 pb-1">
                    <label class="col-12 col-sm-3 col-form-label text-sm-right">品牌分类</label>

                    <div class="col-12 col-sm-8 col-lg-6 form-check mt-2">

                        @foreach($cate as $v)
                            @if($v['_level'] == 3)
                            <label class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" name="categorys[]" value="{{$v['id']}}"
                                       class="custom-control-input">
                                <span
                                        class="custom-control-label" style="padding-left: 30px">{{$v['name']}}</span>
                            </label>
                            @endif
                        @endforeach

                    </div>
                </div>

            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-primary offset-sm-2">保存提交</button>
            </div>
        </form>
    </div>
@endsection
